import React, { useState, useEffect } from "react";
import { HashRouter } from "react-router-dom";
import { connect } from "react-redux";
import { setLanguage } from "@/redux/modules/global/action";
import { ConfigProvider } from "tdesign-react";
import type { GlobalConfigProvider } from "tdesign-react";
import enConfig from "tdesign-react/es/locale/en_US";
import zhConfig from "tdesign-react/es/locale/zh_CN";
import { updateTdesignConfig } from "@/utils";
import { tdesignConfigZh, tdesignConfigEn } from "@/config";

import Router from "@/routers/index";
import useTheme from "@/hooks/useTheme";
import i18n from "i18next";

const App = (props: any) => {
	const { language, themeConfig } = props;
	const [globalConfig, setGlobalConfig] = useState<GlobalConfigProvider>({});
	const isDark = themeConfig.isDark;
	// 设置UI国际化
	const tdesingLanguage = () => {
		if (language && language === "zh") {
			const config = updateTdesignConfig(zhConfig, tdesignConfigZh);
			setGlobalConfig(config);
		} else if (language && language === "en") {
			const config = updateTdesignConfig(enConfig, tdesignConfigEn);
			setGlobalConfig(config);
		}
	};
	useEffect(() => {
		tdesingLanguage();
		i18n.changeLanguage(language);
	}, [language]);
	useEffect(() => {
		useTheme(themeConfig);
	}, [isDark]);
	return (
		<HashRouter>
			<ConfigProvider globalConfig={globalConfig}>
				<Router />
			</ConfigProvider>
		</HashRouter>
	);
};
const mapStateToProps = (state: any) => state.global;
const mapDispatchToProps = { setLanguage };
export default connect(mapStateToProps, mapDispatchToProps)(App);
